<script setup lang="ts">
const loginUser = useLoginUserStore();
const router = useRouter();

const logoutHandler = () => {
  loginUser.logout();
  // router.push('/login');
};
</script>

<template>
  <div class="user">
    <div class="title">
      <h2>用户信息</h2>
      <SvgIcon class="logout" @click="logoutHandler" name="icon-logout"></SvgIcon>
    </div>
    <div class="info">
      <div class="img-wrap">
        <img :src="loginUser.loginUser.user?.avatar_url" :alt="loginUser.loginUser.user?.username" />
      </div>
      <div class="info-wrap">
        <p class="username">{{ loginUser.loginUser.user?.username }}</p>
        <p class="email">{{ loginUser.loginUser.user?.email }}</p>
      </div>
    </div>
    <div class="info"><p class="holder">订单信息</p></div>
    <div class="info"><p class="holder">收货信息</p></div>
    <div class="info"><p class="holder">地址信息</p></div>
    <div class="info"><p class="holder">联系客服</p></div>
  </div>
</template>

<style lang="scss" scoped>
.user {
  .title {
    position: relative;

    h2 {
      font-size: 20rem;
      text-align: center;
    }
    .logout {
      position: absolute;

      top: 1rem;
      right: 15rem;
      font-size: 20rem;
    }
  }

  .info {
    margin: 20rem;
    border: none;
    border-radius: 20rem;
    overflow: hidden;
    box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.3);
    display: flex;

    .holder {
      font-size: 16rem;
      margin: 15rem;
    }

    .img-wrap {
      width: 60rem;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.3);
      margin: 10rem 20rem;
    }

    .info-wrap {
      flex: auto;
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      font-size: 14rem;

      p {
        margin: 0;
        padding: 0;
      }
    }
  }
}
</style>
